<template>
  <div class="alone-outBox f14" v-loading="loading">
    <div class="alone-topBox mb16">
      <div class="tableBox">
        <div class="navBannerItem">
          <h4>背景图设置</h4>
          <div class="nbiContent">
            <label>品牌页背景图:</label>
            <div class="nbicRight">
              <el-upload
                ref="uploadPic"
                action="https://fileapi.instrument.com.cn/upflash/upimg.ashx?colname=webinar"
                list-type="picture-card"
                :file-list="dialogImageUrl"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError"
                :limit="1">
                <i class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    v-if="dialogImageUrl.length > 0"
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <p class="nbicrTip">广告图片用于品牌页展示，比例为16:9</p>
            </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageBigUrl" alt="">
            </el-dialog>
          </div>
          <div class="nbiContent">
            <label>品牌简介:</label>
            <div class="nbicRight">
              <p style="width: 560px;margin: 0 auto">
                <Ueditor v-if="brandGroupObj.companyAbstract" ref="ue" :value="defaultMSG" @ready="editorReady" />
              </p>
            </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageBigUrl" alt="">
            </el-dialog>
          </div>
        </div>
        <div class="navBannerItem">
          <h4>推荐视频设置</h4>
          <div class="nbiContent" v-for="(item, index) in videoList" :key="index">
            <div class="nbicItem">
              <label class="lineLabel">推荐视频{{index+1}}:</label>
              <el-select class="mr20 w400" v-model="item.videoId" placeholder="请选择" @change="getChangeVideoSelect(item)">
                <el-option
                  v-for="item in recommendedVideoList"
                  :key="item.videoid"
                  :label="item.title"
                  :value="item.videoid">
                </el-option>
              </el-select>
            </div>
            <div class="nbicItem">
              <label class="lineLabel">是否上/下架：:</label>
              <el-select class="mr20" v-model="item.isShow" placeholder="请选择" @change="getChangeGroundState(item)">
                <el-option
                  v-for="item in groundState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="nbiContent" v-for="(item, indexs) in videoListReplenish" :key="indexs+'123'">
            <div class="nbicItem">
              <label class="lineLabel">推荐视频{{videoList.length+indexs+1}}:</label>
              <el-select class="mr20 w400" v-model="item.videoId" placeholder="请选择" @change="getChangeVideoSelect(item)">
                <el-option
                  v-for="item in recommendedVideoList"
                  :key="item.videoid"
                  :label="item.title"
                  :value="item.videoid">
                </el-option>
              </el-select>
            </div>
            <div class="nbicItem">
              <label class="lineLabel">是否上/下架：:</label>
              <el-select class="mr20" v-model="item.isShow" placeholder="请选择" @change="getChangeGroundState(item)">
                <el-option
                  v-for="item in groundState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api'
import Ueditor from '@/components/UEditor'
import { getImShowId } from '@/utils/auth'
export default {
  components: { Ueditor },
  data () {
    return {
      defaultMSG: '',
      form: {
        id: this.$route.query.id ? this.$route.query.id : '',
        authorName: '',
        img: '',
        email: '',
        mobile: '',
        jobAddress: '',
        info: '',
        imshowid: this.$store.getters.imShowId

      },
      brandGroupObj: {}, // 品牌背景图+品牌简介
      dialogVisible: false,
      loading: true,
      brandObj: [],
      dialogImageUrl: [], // 图片回显
      videoList: [], // 视频推荐
      videoListReplenish: [], // 视频推荐补充
      dialogImageBigUrl: [], // 图片预览
      groundState: [
        { label: '上架', value: 1 },
        { label: '下架', value: 0 }
      ],
      recommendedVideoList: []
    }
  },
  mounted () {
  },
  async created () {
    await this.getBrandInfo()
    await this.getDetail()
    await this.getVideoList()
  },
  methods: {
    // 预览背景图
    handlePictureCardPreview (file) {
      this.dialogImageBigUrl = file.url
      this.dialogVisible = true
    },
    // 删除背景图
    async handleRemove (file) {
      const params = {
        backgroundUrl: '',
        companyAbstract: this.brandGroupObj.companyAbstract,
        companyAccount: getImShowId()
      }
      this.dialogImageUrl = []
      this.getUpdateCompany(params)
    },
    // 上传图片成功-回调
    handleAvatarSuccess (res, file) {
      if (res.code === 200) {
        const imgUrl = `https://img1.17img.cn/17img/${res.data}`
        this.dialogImageUrl = [{ name: 'brandBanner', url: imgUrl }]
        file = [{ name: 'brandBanner', url: imgUrl }]
        const params = {
          backgroundUrl: imgUrl,
          companyAbstract: this.brandGroupObj.companyAbstract,
          companyAccount: getImShowId()
        }
        this.getUpdateCompany(params)
      } else {
        this.$message({
          message: '图片上传失败',
          type: 'error'
        })
        return false
      }
    },
    // 上传图片失败-回调
    handleAvatarError () {
      this.$message({
        message: '图片上传失败',
        type: 'error'
      })
    },
    // 上传图片中-回调
    beforeAvatarUpload (file) {
      const isImgType = file.type === 'image/jpeg' || file.type === 'image/png'
      // const isLt2M = file.size / 1024 / 1024 < 2
      if (!isImgType) {
        this.$message.error('上传头像图片只能是 JPG/Png 格式!')
      }
      return isImgType
    },
    // 品牌简介
    editorReady (instance) {
      instance.setContent(this.brandGroupObj.companyAbstract)
      instance.addListener('contentChange', () => {
        this.brandGroupObj.companyAbstract = instance.getContent()
      })
      instance.addListener('blur', () => {
        this.brandGroupObj.companyAbstract = instance.getContent()
        const params = {
          backgroundUrl: this.brandGroupObj.backgroundUrl,
          companyAbstract: this.brandGroupObj.companyAbstract,
          companyAccount: getImShowId()
        }
        this.getUpdateCompany(params)
      })
    },
    // 修改品牌推荐
    async getUpdateBrand (params) {
      try {
        await api.recommendApi.updateRecommend(params)
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } catch (error) {

      }
    },
    // 品牌回显
    async getDetail () {
      const _this = this
      _this.loading = true
      try {
        const params = {
          imShowId: getImShowId()
        }
        const { data } = await api.recommendApi.selectRecommend(params)
        _this.brandObj = data
        _this.brandObj.map(item => {
          if (item.type === 2) {
            _this.videoList.push(item)
          }
        })
        // 推荐视频最多设置3个
        if (this.videoList.length < 3) {
          const numList = 3 - this.videoList.length
          for (let i = 0; i < numList; i++) {
            this.videoListReplenish.push({
              companyAccount: getImShowId(),
              isShow: null, // 是否上架：0-下架，1-上架
              type: 2, // 类型：0-背景图，2-视频
              videoId: null // 视频
            })
          }
        }
        _this.loading = false
      } catch (error) {
        _this.loading = false
      }
    },
    // 品牌设置-查看公司简介和背景图
    async getBrandInfo () {
      this.loading = true
      try {
        const params = {
          companyAccount: getImShowId()
        }
        const { data } = await api.newCompanyApi.getBrandCompanyInfo(params)
        this.brandGroupObj = data
        if (data.backgroundUrl) {
          this.dialogImageUrl.push({ name: 'brandBanner', url: data.backgroundUrl })
        }
        if (!data.companyAbstract) {
          this.brandGroupObj.companyAbstract = ''
        } else {
          this.defaultMSG = data.companyAbstract
        }
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // 修改公司简介和背景图
    async getUpdateCompany (params) {
      try {
        await api.newCompanyApi.updateBrandCompanyInfo(params)
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } catch (error) {
        this.$message({
          message: '修改失败',
          type: 'error'
        })
      }
    },
    async getVideoList () {
      const params = {
        companyAccount: getImShowId(),
        title: ''
      }
      const { data } = await api.video.getVideoByTitle(params)
      this.recommendedVideoList = data
    },
    // 推荐视频选择
    getChangeVideoSelect (data) {
      if (data.isShow === null) {
        data.isShow = 0
      }
      this.getUpdateBrand(data)
    },
    // 上下架
    getChangeGroundState (data) {
      if (data.isShow === null) {
        data.isShow = 0
      }
      this.getUpdateBrand(data)
    }
  }
}
</script>
<style lang="scss" scoped>
  .w400 {
    width: 400px;
  }
  .alone-topBox {
    height: 100%;
    padding: 0;
    .navBannerItem {
      margin: 0 auto;
      h4 {
        width: 200px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: bold;
        color: #202933;
        line-height: 19px;
        margin-left: 4px;
        padding-left: 20px;
        position: relative;
        line-height: 1;
        &::before {
          content: "";
          width: 5px;
          height: 18px;
          background-color: #0C7FF2;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 9;
        }
      }
      .nbiContent {
        width: 100%;
        margin: 40px auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        label {
          width: 130px;
          display: inline-block;
          text-align: left;
          padding-left: 20px;
          font-size: 14px;
          color: #7E8790;
          font-family: PingFang SC-Regular, PingFang SC;
          position: relative;
          &.lineLabel {
            width: 130px;
          }
        }
        .nbicRight {
          .nbicrTip {
            font-size: 14px;
            color: #aaa;
            text-align: left;
            margin: 20px 0;
          }
          ::v-deep .el-upload-list__item {
            &>div {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              .el-upload-list__item-thumbnail {
                width: 100%;
                height: auto;
              }
            }
          }
        }
      }
    }
  }
  .mr20 {
    margin-right: 20px;
  }
</style>
